<script setup>
import { useCategoryStore }  from '@/stores/category';
const category = useCategoryStore();
</script>
<template>
<div class="home_category">
   <ul>
      <li v-for="item in category.categoryList" :key="item.id">
          <RouterLink to="/">{{item.name}}</RouterLink>
          <RouterLink to="/" v-for="i in item.childList.slice(0,2)" :key="i">{{i.name}}</RouterLink>
          <!--弹出层位置-->
          <div class="layer">
              <h4>分类推荐<small>根据您的购买或浏览记录推荐</small></h4>
              <ul>
                <li v-for="i in item.productInfoVOList" :key="i.id">
                    <RouterLink :to="`/detail/${i.id}`">
                      <img alt="" :src="i.pic"/>
                      <div class="info">
                          <p class="name">{{ i.productName }}</p>
                          <p class="des">{{i.description}}</p>
                          <p class="price"><i>¥</i>{{i.price}}</p>
                      </div>
                  </RouterLink>
                </li>
              </ul>
          </div>
      </li>
   </ul>

</div>
</template>
<style lang="scss" scoped>
.home_category{
    width:250px;
    height:500px;
    background: rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 99;

    ul{
      li{
        padding-top: 3px;
        padding-left:20px;
        height:55px;
        line-height: 55px;
        width: 100%;

        &:hover{
          background-color: $xtxColor;
          .layer{
             display: block;
          }
        }

        a{
          margin-right: 5px;
          color: #e7e5e5;
          &:first-child{
             font-size: 16px;
          }
        }

        .layer{
           width: 1030px;
           height: 500px;
           position: absolute;
           left:250px;
           top:0px;
           display: none;

           h4{
             padding-left: 8px;
             font-size: 18px;
             font-weight: normal;
             line-height: 80px;

             small{
                padding-left: 5px;
                font-size: 14px;
                color:#666
             }
           }

           ul{
              display: flex;
              flex-wrap: wrap;
              li{
                 width: 310px;
                 height: 120px;
                 background-color: #fff;
                 border: 1px solid #eeee;
                 border-radius: 4px;
                 margin-bottom: 15px;
                 margin-left:15px;


                 a{
                    display: flex;
                    width:100%;
                    height: 100%;
                    align-items: center;
                    padding-left: 10px;

                    &:hover{
                       background-color: #e3f9f4;
                    }

                    img{
                       width:95px;
                       height: 95px;
                    }

                    .info{
                        padding-left:10px;
                        line-height: 24px;
                        overflow: hidden;

                        .name{
                            font-size: 18px;
                            color: #333;
                        }
                        .des{
                            font-size: 12px;
                            color: #999;
                        }
                        .price{
                            font-size: 12px;
                            color: #f00;
                        }
                    }
                 }

              }
           }
        }
      }
    }
}
</style>
